<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-lang="site.title">个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo" data-lang="site.title">我的作品集</div>
            <ul class="nav-links">
                <li><a href="#home" data-lang="nav.home">首页</a></li>
                <li><a href="#about" data-lang="nav.about">关于我</a></li>
                <li><a href="#projects" data-lang="nav.projects">项目</a></li>
                <li><a href="#contact" data-lang="nav.contact">联系我</a></li>
                <li class="language-selector">
                    <select id="language-select">
                        <option value="zh">中文</option>
                        <option value="en">English</option>
                    </select>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <div class="profile-image">
                    <img src="二次元梗图/1.jpg" alt="个人头像">
                </div>
                <h1 data-lang="hero.title">欢迎来到我的作品集</h1>
                <p data-lang="hero.subtitle">我是前端开发者，专注于创建美观且功能强大的网站。</p>
                <button id="cta-button" data-lang="cta.button">了解更多</button>
            </div>
        </section>

        <section id="about" class="about">
            <h2 data-lang="about.title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="二次元梗图/2.jpg" alt="关于我">
                </div>
                <div class="about-text">
                    <h3 data-lang="about.profile">个人简介</h3>
                    <p data-lang="about.intro1">我是一名Python Developer，擅长消息中间件、实时数据处理和高可用架构设计。</p>
                    <p data-lang="about.intro2">喜欢打游戏，也热爱动漫，尤其是《我的青春恋爱物语果然有问题》、《孤独摇滚》和《进击的巨人》。</p>
                </div>
            </div>
            
            <!-- 技能标签 -->
            <div class="skills-section">
                <h3 data-lang="skills.title">技能标签</h3>
                <div class="skills-container">
                    <div class="skill-tag skill-level-5">Python</div>
                    <div class="skill-tag skill-level-4">Next.js</div>
                    <div class="skill-tag skill-level-3">Rust</div>
                </div>
            </div>
            
            <!-- 专业经历时间线 -->
            <div class="timeline-section">
                <h3 data-lang="timeline.title">专业经历</h3>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2022-2025</div>
                        <div class="timeline-content">
                            <h4 data-lang="timeline.school1">广东机电职业技术学院</h4>
                            <p data-lang="timeline.degree1">专科</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2025-2027</div>
                        <div class="timeline-content">
                            <h4 data-lang="timeline.school2">广州软件学院</h4>
                            <p data-lang="timeline.degree2">本科</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <h2 data-lang="projects.title">我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <div class="project-image">
                        <img src="二次元梗图/054b5a984c6b5304fc0e976939f7ae1b.jpg" alt="动漫角色生成器">
                    </div>
                    <h3 data-lang="project1.title">动漫角色生成器</h3>
                    <p data-lang="project1.desc">基于AI的动漫角色生成器，可以创建独特的二次元角色。</p>
                </div>
                <div class="project-card">
                    <div class="project-image">
                        <img src="二次元梗图/2b4bc636fcd1174d69622f4136e8b7e8.jpg" alt="表情包制作工具">
                    </div>
                    <h3 data-lang="project2.title">表情包制作工具</h3>
                    <p data-lang="project2.desc">在线表情包制作工具，支持多种二次元风格模板。</p>
                </div>
                <div class="project-card">
                    <div class="project-image">
                        <img src="二次元梗图/49dcaff5ea5907a8cb544c79c655f820.jpg" alt="动漫壁纸库">
                    </div>
                    <h3 data-lang="project3.title">动漫壁纸库</h3>
                    <p data-lang="project3.desc">收集了大量高质量动漫壁纸的在线资源库。</p>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <h2 data-lang="contact.title">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3 data-lang="contact.info">联系信息</h3>
                    <p data-lang="contact.email">邮箱: 1275955978@qq.com</p>
                    
                    <!-- 社交媒体链接 -->
                    <div class="social-media">
                        <h4>社交媒体</h4>
                        <a href="mailto:1275955978@qq.com" class="social-link">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                <path d="M22 6L12 13 2 6"></path>
                                <line x1="2" y1="17" x2="2" y2="6"></line>
                                <line x1="22" y1="17" x2="22" y2="6"></line>
                            </svg>
                            1275955978@qq.com
                        </a>
                    </div>
                </div>
                <form id="contact-form" class="contact-form">
                    <div class="form-group">
                        <label for="name">姓名 *</label>
                        <input type="text" id="name" placeholder="您的姓名" data-lang-placeholder="form.name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱 *</label>
                        <input type="email" id="email" placeholder="您的邮箱" data-lang-placeholder="form.email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言 *</label>
                        <textarea id="message" rows="5" placeholder="您的消息" data-lang-placeholder="form.message" required></textarea>
                    </div>
                    <button type="submit" data-lang="form.submit">发送</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p data-lang="footer.copyright">&copy; 2025 我的作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="#">GitHub</a>
                <a href="#">Bilibili</a>
                <a href="#">Pixiv</a>
            </div>
        </div>
    </footer>

    <script type="module">
        // 导入语言模块
        import { translations, getCurrentLanguage, setLanguage, initLanguage } from './lang.js';
        
        // 翻译页面内容
        function translatePage(lang) {
            // 更新标题
            const titleElement = document.querySelector('title[data-lang]');
            if (titleElement && translations[lang][titleElement.getAttribute('data-lang')]) {
                titleElement.textContent = translations[lang][titleElement.getAttribute('data-lang')];
            }
            
            // 更新所有带data-lang属性的元素
            document.querySelectorAll('[data-lang]').forEach(el => {
                const key = el.getAttribute('data-lang');
                if (translations[lang][key]) {
                    el.textContent = translations[lang][key];
                }
            });
            
            // 更新placeholder
            document.querySelectorAll('[data-lang-placeholder]').forEach(el => {
                const key = el.getAttribute('data-lang-placeholder');
                if (translations[lang][key]) {
                    el.placeholder = translations[lang][key];
                }
            });
            
            // 更新语言选择器
            document.getElementById('language-select').value = lang;
        }
        
        // 初始化语言
        const initialLang = initLanguage();
        translatePage(initialLang);
        
        // 监听语言切换
        document.getElementById('language-select').addEventListener('change', function() {
            const newLang = this.value;
            if (setLanguage(newLang)) {
                translatePage(newLang);
            }
        });
    </script>
    <script src="main.js"></script>
</body>
</html>